<template>
	<div>
		<div class="clearfix xblock">
			<a-button type="primary" @click="addEdmit">添加广告位</a-button>
		</div>
		<table class="table" cellspacing="0" cellpadding="0">
			<tbody>
				<tr>
					<th>广告位</th>
					<th>描述</th>
					<th>是否显示</th>
					<th>操作</th>
				</tr>
			</tbody>
			<tbody>
				<tr v-for="(item,index) in dataList" :key="index">
					<td>{{item.name}}</td>
					<td>{{item.desc}}</td>
					<td>{{item.status == 1 ? "显示" : "不显示"}}</td>
					<td>
						<a-button type="primary" size="small" style="cursor: pointer;" @click="goAdvertis(item)">广告管理</a-button>
						<EditOutlined class="detailsA" @click="amend(item,index)"
							:style="{fontSize:'18px',marginLeft:'10px',}" />
						<DeleteOutlined class="detailsB" @click="deleteData(item)"
							:style="{fontSize:'18px',marginLeft:'10px'}" />
					</td>
				</tr>
			</tbody>
		</table>
		<!--分页-->
		<div v-if="pageSum > 1" class="m-t-30">
			<a-pagination :pageSize="pageSize" :current="page" :total="count" @change="clickPage" />
		</div>
		<!--引入广告管理-->
		<myChild ref="mineData" @addAdverst="addAdverst"></myChild>
	</div>
</template>

<script>
	import myChild from './guangGaoChild.vue'
	import apiGuangao from '../../../api/system.js'
	import storges from '../../../storage/index.js';
	import {
		Modal
	} from 'ant-design-vue';

	export default {
		components: {
			myChild
		},
		data() {
			return {
				checked: false,
				page: 1,
				pageSize: 20,
				pageSum: 0,
				count: 0,

				dataList: '',
			}
		},
		mounted() {
			this.guangaoList();
		},
		methods: {
			/*获取广告*/
			guangaoList() {
				apiGuangao.getAdvertisementSpaceList().then(res => {
					if(res.status == 1){
						this.page = res.result.page
						this.pageSize = res.result.pageSize
						this.pageSum = res.result.pageSum
						this.count = res.result.count
						this.dataList = res.result.data
					}
				})
			},
			/*添加跳转*/
			addEdmit() {
				this.$refs.mineData.sures()
			},
			/*跳转到广告列表*/
			goAdvertis(item) {
				this.$router.push({
					path: '/system/advertisList',
					query: {
						id: item.id
					}
				})
			},
			/*修改跳转*/
			amend(item, index) {
				storges.setItem("myItem", item);
				this.$refs.mineData.suresTwo(storges.getItem('myItem'))
			},
			/*获取添加数据*/
			addAdverst(e) {
				let pp = true
				for (var i in e) {
					if (!e[i]) {
						this.$message.error("请输入内容")
						pp = false
						return
					}
				}
				if (pp == false) {
					return;
				}
				apiGuangao.advertisementSpace(e).then((res) => {
					this.guangaoList();
				})
			},
			/*删除*/
			deleteData(item) {
				console.log(item);
				let T = this
				Modal.confirm({
					title: () => '确定删除吗?',
					okText: '确认',
					cancelText: '取消',
					onOk() {
						apiGuangao.delAdvertisementSpace({
							id: item.id
						}).then((res) => {
							if (res.status === 1) {
								T.guangaoList();
								T.$message.success('您已删除');
							}
						})
					},
				})
			},
		}
	}
</script>
<style scoped>
	.xblock {
		background-color: #F2F2F2;
		padding: 10px 5px;
	}

	.detailsA {
		position: relative;
	}

	.detailsA:after {
		position: absolute;
		width: 59px;
		top: 31px;
		height: 12px;
		left: -20px;
		display: none;
		content: "修改";
		color: #9D9589;
		font-size: 12px;
		color: #990055;
	}

	.detailsA:hover::after {
		display: block;
	}

	.detailsB {
		position: relative;
	}

	.detailsB:after {
		position: absolute;
		width: 59px;
		top: 31px;
		height: 12px;
		left: -20px;
		display: none;
		content: "删除";
		color: #9D9589;
		font-size: 12px;
		color: #990055;
	}

	.detailsB:hover::after {
		display: block;
	}
</style>